<template>
  <div>
    <!-- 角色列表 -->
    <div>
      <!--分割线  -->
      <p class="addto">
        <el-button @click="rouaddto" type="primary">添加角色</el-button>
      </p>

      <el-table :data="rolelist" border style="width: 100%">
        <!-- 展开列 -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <!-- 栅格布局 -->
            <el-row
              v-for="(item1, index1) in scope.row.children"
              :key="item1.id"
              :class="['bdbottom', index1 == '0' ? 'bdtop' : '', 'vcenter']"
            >
              <!-- 渲染一级权限 -->
              <el-col>
                <el-tag closable :span="5" @close="daletx(scope.row, item1)">
                  {{ item1.authName }}
                </el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <!-- 二级和三级 -->
              <el-col :span="19">
                <!-- 二级权限 -->
                <el-row
                  v-for="(itemb, i2) in item1.children"
                  :key="itemb.id"
                  :class="[i2 == 0 ? '' : 'bdtop', 'vcenter']"
                >
                  <el-col :span="6">
                    <el-tag
                      type="success"
                      closable
                      @close="daletx(scope.row, itemb)"
                    >
                      {{ itemb.authName }}
                    </el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <!-- 三级权限 -->
                  <el-col :span="18">
                    <el-row>
                      <el-col
                        v-for="(items, i3) in itemb.children"
                        :key="items.id"
                        :ae="i3"
                        :span="6"
                      >
                        <el-tag
                          type="warning"
                          closable
                          @close="daletx(scope.row, items)"
                        >
                          {{ items.authName }}
                        </el-tag>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <!-- 列表 -->
        <el-table-column label="#" type="index"> </el-table-column>
        <!-- 名称 -->
        <el-table-column label="商品名称" prop="roleName"> </el-table-column>
        <!-- 描述 -->
        <el-table-column label="描述" prop="roleDesc"> </el-table-column>
        <!-- 操作商品 -->
        <el-table-column label="操作" prop="idx" width="300px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              :scopex="scope"
              type="primary"
              icon="el-icon-search"
              @click="search(scope)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="deletg(scope)"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-setting"
              @click="showlist(scope)"
              >分配权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-dialog title="添加用户" :visible.sync="dack" width="60%">
        <div>
          <!-- 表单验证 -->
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <!-- 用户名 -->
            <el-form-item label="添加角色名" prop="roleName">
              <el-input v-model="ruleForm.roleName"></el-input>
            </el-form-item>

            <!-- 密码 -->
            <el-form-item label="角色描述" prop="roleDesc">
              <el-input v-model="ruleForm.roleDesc"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cance">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <!-- 分配权限表单 -->
    <div>
      <el-dialog title="分配权限" :visible.sync="show" width="50%">
        <!-- 树形控件 -->
        <el-tree
          :data="showTlist"
          :props="treeProps"
          :default-expand-all="true"
          :default-checked-keys="showolist"
          show-checkbox
          node-key="id"
          ref="treealllist"
          getCheckedKeys
          getHalfCheckedKeys
        ></el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="show = false">取 消</el-button>
          <el-button type="primary" @click="allgo">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <!-- 添加数据 -->

      <el-dialog title="添加用户" :visible.sync="dak2" width="60%">
        <div>
          <!-- 表单验证 -->
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <!-- 用户名 -->
            <el-form-item label="修改角色名" prop="roleName">
              <el-input v-model="ruleForm.roleName"></el-input>
            </el-form-item>

            <!-- 密码 -->
            <el-form-item label="修改描述" prop="roleDesc">
              <el-input v-model="ruleForm.roleDesc"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dak2 = false">取 消</el-button>
          <el-button type="primary" @click="submitFormto('ruleForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: false,
      dack: false, // 控制添加数据表单的显示和隐藏
      dak2: false, // 控制编辑数据的表单显示和隐藏
      rolelist: [], // 列表数据
      showTlist: [], // 权限数据
      showolist: [], // 已经选中的权限数据
      treeProps: {
        // 树形控件的配置对象
        label: 'authName', // 显示名为
        children: 'children' // 根据那个属性来展开
      },
      id: -1,
      ruleForm: {
        // 添加和编辑的数据
        roleName: '', // 角色名
        roleDesc: '' // 角色描述,
      },
      rules: {
        // 表单验证规则
        roleName: [
          { required: true, message: '请输入角色名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        roleDesc: [
          { required: true, message: '请输角色描述(⊙o⊙)？', trigger: 'blur' },
          {
            min: 3,
            max: 15,
            message: '长度在 3 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted () {
    // 调动获取角色列表
    this.rolelists()
  },
  methods: {
    // 获取角色列表
    rolelists () {
      // 获取角色列表

      this.rolelist = []
      this.$axios
        .get('https://www.liulongbin.top:8888/api/private/v1/roles')
        .then((rem) => {
          // console.log(rem);
          //   返回200则
          if (rem.meta.status == '200') {
            //   赋值
            this.rolelist = rem.data
            // console.log(this.rolelist);
            // 添加自定义id
            this.rolelist.map((item, index) => {
              return (item.idx = index + 1)
            })
          }
        })
    },
    // 测试点击
    dj (rem) {
      console.log(rem)
    }, // 编辑1
    search (dat) {
      // console.log(dat);
      this.$axios
        .get(
          'https://www.liulongbin.top:8888/api/private/v1/roles/' + dat.row.id
        )
        .then((rem) => {
          if (rem.meta.status == '200') {
            this.ruleForm = rem.data
            // console.log(this.ruleForm);
            this.dak2 = true
            return false
          }
          // 如果不成功则会到此
          this.$message.error(rem.meta.msg)
        })
    },
    // 添加角色
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {}
          let use = this.ruleForm
          data.roleName = use.roleName
          data.roleDesc = use.roleDesc
          //           data: {roleId: 4818, roleName: "吾王我", roleDesc: "威威为"}
          // meta: {msg: "创建成功", status: 201}

          // 提交数据
          this.$axios
            .post('https://www.liulongbin.top:8888/api/private/v1/roles', data)
            .then((rem) => {
              let { meta, data } = rem

              if (meta.status == '201') {
                // 提示消息
                this.$message.success(meta.msg)
                // 关闭弹框
                this.dack = false
                // 调动请求列表
                this.rolelists()
                // 重置列表数据
                // this.resetForm();
                use.roleName = ''
                use.roleDesc = ''
              } else {
                // this.message(meta.msg);
              }
              // console.log(rem);
            })
        } else {
          return false
        }
      })
    },
    // 编辑2
    submitFormto (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {}
          let use = this.ruleForm
          data.roleName = use.roleName
          data.roleDesc = use.roleDesc
          //           data: {roleId: 4818, roleName: "吾王我", roleDesc: "威威为"}
          // meta: {msg: "创建成功", status: 201}

          // 提交数据
          this.$axios
            .put(
              'https://www.liulongbin.top:8888/api/private/v1/roles/' +
                use.roleId,
              data
            )
            .then((rem) => {
              let { meta, data } = rem

              if (meta.status == '200') {
                // 提示消息
                this.$message.success(meta.msg)
                // 关闭弹框
                this.dak2 = false
                // 调动请求列表
                this.rolelists()
                // 重置列表数据

                use.roleName = ''
                use.roleDesc = ''
              } else {
              }
            })
        } else {
          return false
        }
      })
    },

    // 添加角色时的操作
    rouaddto () {
      // 初始化
      var use = this.ruleForm
      use.roleName = ''
      use.roleDesc = ''
      this.dack = true
    },
    // 表单操作点击取消时的执行
    cance () {
      this.dack = false
    },
    // 删除数据操作
    deletg (data) {
      // 弹框
      this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 请求
          this.$axios
            .delete(
              'https://www.liulongbin.top:8888/api/private/v1/roles/' +
                data.row.id
            )
            .then((rem) => {
              if (rem.meta.status == '200') {
                // 请求更新后的列表
                this.rolelists()
                // 返回消息提示
                return this.$message.success(rem.meta.msg)
              }
              // 如果不成功则会到此
              this.$message.error(rem.meta.msg)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 删除权限的操作
    daletx (data, item) {
      this.$confirm('此操作将删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 确定的操作

          this.$axios
            .delete(
              `https://www.liulongbin.top:8888/api/private/v1/roles/${data.id}/rights/${item.id}`
            )
            // meta:  msg: "取消权限成功", status: 200}

            .then((rem) => {
              // 如果成功
              if (rem.meta.status == '200') {
                // 获取数据
                let { meta } = rem
                // 弹框提示
                this.$message({
                  type: 'success',
                  message: meta.msg
                })
                // 在此请求数据
                // this.rolelists();
                data.children = rem.data
              }
            })
        })
        .catch(() => {
          // 取消执行这里
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 展开权限列表
    showlist (data) {
      // 初始化以获得的权限数组

      this.id = data.row.id
      this.showolist = []
      // 赋值
      var ita = data.row.children

      var itb = [] // 一级权限
      for (var i1 = 0; i1 < ita.length; i1++) {
        // 循环一级
        for (var i2 = 0; i2 < ita[i1].children.length; i2++) {
          // 获得二级
          itb.push(ita[i1].children[i2])
          // 循环二级
          for (var i3 = 0; i3 < itb[i2].children.length; i3++) {
            // 获取三级获得权限的id
            this.showolist.push(itb[i2].children[i3].id)
          }
        }
      }
      // 获取在线全部权限列表
      this.$axios
        .get('https://www.liulongbin.top:8888/api/private/v1/rights/tree')
        .then((rem) => {
          this.showTlist = rem.data
          // console.table(this.showTlist);
        })
      // 开启表单
      this.show = true
    },
    allgo (id) {
      // 获取已经选中和半选的权限的id
      let data = [
        ...this.$refs.treealllist.getHalfCheckedKeys(),
        ...this.$refs.treealllist.getCheckedKeys()
      ]
      // 转为字符串
      var data2 = data.join(',')

      // 发起请求
      this.$axios
        .post(
          `https://www.liulongbin.top:8888/api/private/v1/roles/${this.id}/rights`,
          {
            rids: data2
          }
        )
        .then((rem) => {
          // 如果成功

          if (rem.meta.status == '200') {
            // 弹框提示

            this.$message.success(rem.meta.msg)
            // 数据刷新
            // this.rolelists()
          }
        })
        // 关闭表单
      this.show = false
    }
  }
}
</script>
<style scoped>
/* css 样式 */
.addto {
  text-align: left;
}
.el-tag {
  margin: 0;
}

.bdtop {
  border-top: 1px #eee solid;
}

.bdbottom {
  border-bottom: 1px #eee solid;
}
.vcenter {
  display: flex;
  align-items: center;
}
</style>
